webpack常见的loader和plugin
chenpeng 2021-05-05 webpack
# loader
# 1.样式资源
# 1.1.css-loader
将 CSS 文件转换成 commnon-js 模块加载到 JS 中，里面的内容是样式字符串
# 1.2.style-loader
创建 style 标签，将 js 的样式资源插入进去，添加到 head 中生效
# 1.3.less-loader
将 less 文件转换成 CSS 文件
# 1.4.postcss-loader
CSS 兼容性处理，必须放在 CSS 规则的最后，最先执行
# 2.图片资源
# 2.1.url-loader
对图片进行处理，配置项：
options: {
// 图片大小如果小于5kb，就会被base64处理
// base64优点：减少请求数量（减轻服务器压力）
// base64缺点：图片体积会更大（文件请求速度更慢）
limit: 5 * 1024,
// 给图片重命名
// [hash:10]指取图片的hash值的前10位
// [ext]指图片原来的扩展名
name: '[hash:10].[ext]'
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.2.html-loader
处理 HTML 文件中的 img 图片，引入 img，从而能被 url-loader 处理
# 2.3.file-loader
打包图片、字体图标等
# 2.4.image-wabpack-loader
压缩图片
# 3.JS 相关
# 3.1.eslint-loader
代码规范及错误检测
# 3.2.babel-loader
编译 JS，可以将 ES6 转换成 ES5
# plugin
# 1.html-webpack-plugin
根据模板生成 HTML，并自动引入打包输出的 JS 和 CSS 文件
new HtmlwebpackPlugin({
template: './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.mini-css-extract-plugin
将 CSS 提取成单独文件
new MiniCssExtractPlugin({
filename: 'css/main.css'
})
1
2
3
2
3
同时用 MiniCssExtractPlugin.loader 代替 style-loader，将 JS 中的 CSS 提取成单独的文件
# 3.clean-webpack-plugin
在打包之前将指定的文件夹清空
# 4.webpack-bundle-analyzer
一个 webpack 的 bundle 可视化分析工具